<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style type="text/css">

@import url(include/style/LayoutP.css);


</style>
</head>
<body>
<h1>LayoutP Styles</h1>

<div class="LayoutP" style="width:500px; height:300px; background-color: pink; left: 200px">
	<!-- Above Center -->
	<div class="LayoutPCenterReg" style="width:150px">
		<div class="LayoutPCenter LayoutPOutsideTop" style="background-color: yellow">Above center</div>
	</div>
	
	<!-- Below Center -->
	<div class="LayoutPCenterReg LayoutPOutsideBottom" style="width:150px;">
		<div class="LayoutPCenter" style="background-color: yellow">Center and Beyond bottom</div>
	</div>

        <!-- Center and bottom -->
	<div class="LayoutPCenterReg LayoutPBottom" style="width:150px; height: 50px;">
		<div class="LayoutPCenter" style="background-color: yellow">Center and bottom</div>
	</div>
	
	<!-- Center Top -->
	<div class="LayoutPCenterReg LayoutPTop" style="width:150px;">
		<div class="LayoutPCenter" style="background-color: gray">center top</div>
	</div>
	
	<!-- Middle Center Top -->
	<div class="LayoutPCenterReg LayoutPMiddleReg" style="width:150px; height: 50px;">
		<div class="LayoutPCenter LayoutPMiddle" style="background-color: gray">center middle</div>
	</div>
	
	<!-- Middle Left -->
	<div class="LayoutPLeft LayoutPMiddleReg" style="width:150px; height: 50px;">
		<div class="LayoutPMiddle" style="background-color: gray">left middle</div>
	</div>
	
	<!-- Middle Right -->
	<div class="LayoutPRight LayoutPMiddleReg" style="height: 50px; width:150px;">
		<div class="LayoutPMiddle" style="background-color: gray">right middle</div>
	</div>
	
	<!-- Middle outside right -->
	<div class="LayoutPOutsideRight LayoutPMiddleReg" style="height: 50px; width:150px;">
		<div class="LayoutPMiddle" style="background-color: gray">Middle outside right</div>
	</div>
	
	<!-- Middle outside left -->
	<div class="LayoutPOutsideLeft LayoutPMiddleReg" style="height: 50px; width:150px;">
		<div class="LayoutPMiddle" style="background-color: gray">Middle outside left</div>
	</div>
	
	<!-- Beyond left and top -->
	<div class="LayoutPOutsideLeft LayoutPOutsideTop" style="width:150px; background-color: yellow">Beyond left and top</div>
	
	<!-- Beyond left -->
	<div class="LayoutPOutsideLeft" style="width:150px; background-color: gray">Beyond left</div>
	
	<!-- Beyond right -->
	<div class="LayoutPOutsideRight" style="width:150px; background-color: yellow">Beyond right</div>
	
	<!-- Beyond right and top -->
	<div class="LayoutPOutsideRight LayoutPOutsideTop" style="width:150px; background-color: gray">Beyond right and top</div>
	
	<!-- Right and top -->
	<div class="LayoutPRight LayoutPTop" style="width:150px; background-color: gray">Right and top</div>
	
	<!-- Left and top -->
	<div class="LayoutPLeft LayoutPTop" style="width:150px; background-color: yellow">Left and top</div>
	
	<!-- Left and outside top -->
	<div class="LayoutPLeft LayoutPOutsideTop" style="width:150px; background-color: gray">Left and outside top</div>
	
	<!-- Right and outside top -->
	<div class="LayoutPRight LayoutPOutsideTop" style="width:150px; background-color: yellow">Right and outside top</div>

        <!-- left and bottom -->
	<div class="LayoutPLeft LayoutPBottom" style="width:150px; background-color: yellow">left and bottom</div>

        <!-- right and bottom -->
	<div class="LayoutPRight LayoutPBottom" style="width:150px; background-color: yellow">right and bottom</div>

</div>

</body>
</html>